import { MciDialog } from '@/components/base';
import './index.scss';
import { Approval } from '@/components/business/Approval';
import { useApprovalProvide } from '@/components/business/Approval/approval-helper/index';
import { MciButton } from '@/components/base';
import { useAppStore } from '@/store/app';
import { postDecisionFlowTaskComplete } from '@/api';

export const ApproveDetail = defineComponent({
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    flowId: {
      type: String,
      default: ''
    },
    flowStatus: {
      type: Number,
      default: -1
    }
  },
  emits: ['update:modelValue', 'refresh'],
  setup(props, { emit }) {

    const appStore = useAppStore();
    const flowId = ref(props.flowId);
    const flowStatus = ref(props.flowStatus);
    const taskId = ref('');
    const loadingBtn = ref(false);
    
    const ApprovalContent = ref();
    const approvalIsAllow = ref(true);

    const initData = () => {
      flowId.value = props.flowId;
      flowStatus.value = props.flowStatus;

      watch(() => [ApprovalContent.value?.isAllow, ApprovalContent.value?.taskId], () => {
        approvalIsAllow.value = ApprovalContent.value?.isAllow;
        taskId.value = ApprovalContent.value?.taskId;
      });
    };

    const handleClose = () => {
      emit('update:modelValue', false);
      flowId.value = '';
    };

    const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
    const handleCloseApproval = async (action: any) => {
      if(!taskId.value) return;
      loadingBtn.value = true;
      const params = {
        taskId: taskId.value,
        approvalStatus: action
      };
      await postDecisionFlowTaskComplete(params);

      // 等待1000毫秒后继续执行
      await delay(1000);
      emit('refresh');
      loadingBtn.value = false;
    };

    watch(
      () => [props.modelValue, props.flowId],
      () => {
        props.modelValue && initData();
      }
    );

    return () => {
      return (
        <MciDialog
          width={430}
          title={flowStatus.value === 1 ? '决策审批' : '审批详情'}
          modelValue={props.modelValue}
          onClose={handleClose}
          customClass="max-height-dialog">
          {{
            default() {
              return (
                <div class="flex justify-center" style={{ 'overflow-y': 'auto' }}>
                  <Approval processInst={flowId.value} ref={ApprovalContent} />
                </div>
              );
            },
            footer() {
              return (
                <>
                  {/* <MciButton onClick={handleClose}>取消</MciButton> */}
                  {flowStatus.value === 1 && (
                    <MciButton type="primary" loading={loadingBtn.value} disabled={approvalIsAllow.value} onClick={() => handleCloseApproval('AGREE')}>
                      同意
                    </MciButton>
                  )}
                  {flowStatus.value === 1 && (
                    <MciButton type="primary" loading={loadingBtn.value} disabled={approvalIsAllow.value} onClick={() => handleCloseApproval('REJECT')}>
                      驳回
                    </MciButton>
                  )}
                </>
              );
            }
          }}
        </MciDialog>
      );
    };
  }
});
